<!DOCTYPE html>
<html lang="en">
  <head>
    <title>商品案例</title>
    <script src="./js/vue2.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }

      .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- <a href="https://www.baidu.com">123</a> -->
      <div class="add">
        编号:<input
          type="text"
          v-model="count.id"
          v-myfocus
          v-getcolor='"red"'
        />
        品牌名称:<input
          type="text"
          v-model="count.name"
          @keydown.enter="addList"
        />
        <input @click="addList" type="button" value="添加" />
      </div>
      <div class="add">
        品牌名称:
        <input type="text" placeholder="请输入搜索条件" />
      </div>
      <div>
        <table class="tb">
          <tbody>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item,index) in list" :key="index">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.time|gettime('-') }}</td>
              <td>
                <a @click="delet(item.id)" href="#">删除</a>
              </td>
            </tr>
            <tr><td colspan=4 v-if='list.length==0'>你已经一无所有</td></tr>
          </tbody>
        </table>
      </div>
    </div>
    <script>
      //   思路:先将原有的数据展示出来
      //        在进行新增
      //        注册键盘事件
      //        删除想要删除的列表
      //        焦点事件'
      //        自定义指令生成
      //         过滤器生成一个当前事件

      // 自定义指令:要求页面加载完毕以后就自动聚焦
      Vue.directive("myfocus", {
        inserted(el, binding) {
          el.focus();
        }
      });
      Vue.directive("getcolor", {
        inserted(el, binding) {
          el.style.color = binding.value;
        }
      });

      var vm = new Vue({
        el: "#app",
        data: {
          list: [
            {
              id: "1",
              name: "周杰伦",
              time: new Date()
            },
            {
              id: "2",
              name: "林俊杰",
              time: new Date()
            },
            {
              id: "3",
              name: "花粥",
              time: new Date()
            },
            {
              id: "4",
              name: "毛不易",
              time: new Date()
            },
            {
              id: "5",
              name: "宋冬野",
              time: new Date()
            },
            {
              id: "6",
              name: "孙燕姿",
              time: new Date()
            }
          ],
          count: {
            id: "",
            name: "",
            time: new Date()
          },
          color: "red"
        },
        filter: {
          gettime: function(time, sep) {
            var date = new Date(time);
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
              month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
              strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            return currentdate;
          }
        },
        methods: {
          addList() {
            //把新增的对象数据放进数组里面
            this.list.push({ ...this.count });
            // this.list.push(this.count)

            this.count = { id: "", name: "", time: new Date() };
          },
          delet(id) {
            //找到id=item.id这个索引
            var index = this.list.findIndex(item => {
              id = item.id;
            });
            this.list.splice(index, 1);
          }
        }
      });
    </script>
  </body>
</html>
